<template>
  <form class="cmp cmp-conversion row">
    <div class="col-5">
      <fieldset>
        <legend>输入</legend>
        <div class="fieldset-content">
          <textarea class="form-control" v-model.trim="inputContent" placeholder="请输入要处理的文本"></textarea>
        </div>
      </fieldset>
    </div>
    <div class="col-2">
      <div class="form-group-list">
        <div class="form-group">
          <select class="form-control" v-model="action" placeholder="操作类型">
            <option v-for="(v,i) in actionList" :key="i" :value="v.value">{{v.label}}</option>
          </select>
        </div>
        <div class="form-group">
          <x-button type="primary" block @click="decrypt">处 理</x-button>
        </div>
      </div>
    </div>
    <div class="col-5">
      <fieldset>
        <legend>输出</legend>
        <div class="fieldset-content">
          <textarea class="form-control" v-model.trim="outputContent" placeholder="处理后的结果" readonly></textarea>
        </div>
      </fieldset>
    </div>
  </form>
</template>

<script>
let CryptoJS = global.CryptoJS || {}

export default {
  name: 'conversion',
  data () {
    return {
      inputContent: '',
      outputContent: '',
      action: '',
      actionList: [
        {label: '喜马拉雅播放地址', value: 'xmly'},
      ],
    }
  },
  methods: {
    // ximalaya
    decrypt_xmly () {
      let playUrl = this.inputContent
      let str = playUrl.replaceAll('-', '+').replaceAll('_','/')
      let num = str.length % 4
      if (num) {str += '===='.substr(num)}
      let decrypted = CryptoJS.AES.decrypt({
        ciphertext: CryptoJS.enc.Base64.parse(str)
      }, CryptoJS.enc.Hex.parse('aaad3e4fd540b0f79dca95606e72bf93'), {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      }).toString(CryptoJS.enc.Utf8)
      this.outputContent = decrypted
    },
    // 表单校验
    checkForm () {
      let result = true
      if (!this.action) {
        result = false
        this.$toast('请选择要执行的操作类型')
      }
      if (!this.inputContent) {
        result = false
        this.$toast('请输入要处理的文本')
      }
      return result
    },
    decrypt () {
      if (!this.checkForm()) return
      if (this.action === 'xmly') {
        this.decrypt_xmly()
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.cmp-conversion {
  height: 100%;
  fieldset {
    height: 100%;
    .fieldset-content {
      height: calc(100% - 2em);
      textarea {
        display: block;
        height: 100%;
      }
    }
  }
  .form-group-list {
    height: 100%;
    padding: .5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
